<template>
    <div>
        <h3 style="padding: 3px;">观看密码</h3>
        <Row>
            <Col span="24" style="margin-top: 20px">
            <Form :label-width="120">
                <FormItem label="直播码：">
                    <Input type="text" v-model="codeInfo.viewCode" :disabled="true">

                    <Button v-if="codeInfo.viewCode" type="ghost" size="small" slot="append" @click="update">更换</Button>
                    <Button v-else type="ghost" size="small" slot="append" @click="add">添加</Button>
                    </Input>
                    <Button v-if="codeInfo.viewCode" size="small" @click="deleteCode"
                            style="float: right;margin:8px 0px 5px 5px;">删除

                    </Button>
                </FormItem>
            </Form>
            </Col>
        </Row>
        <!--增加url对话框-->
        <Modal
                v-model="addUrlModel"
                title="直播码"
                :loading="addUrlModelLoading"
                @on-ok="submitViewCode">
            <Input v-model="codeInfo.viewCode" placeholder="请输入访问密码"></Input>
        </Modal>
        <!--修改对话框-->
        <Modal
                v-model="updateUrlModel"
                title="直播码"
                :loading="updateUrlModelLoading"
                @on-ok="updateCode">
            <Input v-model="codeInfo.viewCode" placeholder="请输入新的访问密码"></Input>
        </Modal>
    </div>
</template>
<script>
    import {addViewCode, deleteViewCode, updateViewCode, getViewCode} from '../../api/api'
    export default{
        data(){
            return {
                updateUrlModel: false,
                addUrlModel: false,
                addUrlModelLoading: true,
                updateUrlModelLoading: true,
                /*url:'',*/
                codeInfo: {
                    liveRoomCodeId: '',
                    viewCode: '',
                    liveRoomId: this.$store.state.operatedLiveRoomId
                }
            }
        },
        methods: {
            deleteCode(){
                deleteViewCode(this.codeInfo.liveRoomCodeId).then(res => {
                    if (res.code == 0) {
                        this.$Message.success('删除成功！');
                        this.codeInfo = {
                            liveRoomCodeId: '',
                            viewCode: '',
                            liveRoomId: this.$store.state.operatedLiveRoomId
                        }
                    } else {
                        this.$Message.error('删除失败！');
                    }
                })
            },
            submitViewCode(){
                if (this.codeInfo.viewCode) {
                    addViewCode(this.codeInfo).then(res => {
                        if (res.code == 0) {
                            this.addUrlModel = false
                            this.$Message.success('添加成功！');
                        }
                    }).catch(res => {
                        this.codeInfo.viewCode = ''
                        this.$Message.error('操作失败！');
                    })
                }

            },
            updateCode(){
                updateViewCode(this.codeInfo).then(res => {
                    if (res.code == 0) {
                        this.updateUrlModel = false
                        this.$Message.success('更新成功！');
                        this.getCode()
                    }
                }).catch(res => {
                    this.updateUrlModel = false
                    this.getCode()
                    this.$Message.error('操作失败！');
                })
            },
            update(){
                this.updateUrlModel = true
            },
            add(){
                this.addUrlModel = true
            },
            getCode(){
                getViewCode(this.codeInfo.liveRoomId).then(res => {
                    if (res.code == 0 && res.liveRoomViewCode != null) {
                        this.codeInfo = res.liveRoomViewCode
                    }
                })
            }
        },
        mounted(){
            this.getCode()
        }
    }
</script>
<style>

</style>